<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-v-for简单购物车.html</title>
    <script src="js/vue.js"></script>

</head>
<body>

<div id="app">
    <table border="1" cellspacing="0">
        <tr>
            <td>编号</td>
            <td>商品名称</td>
            <td>价格</td>
            <td>数量</td>
            <td>小计</td>
            <td>操作</td>
        </tr>

        <tr v-for="(product,index) in products">
            <td>{{ product.id }}</td>
            <td>{{ product.name }}</td>
            <td>{{ product.price }}</td>
            <td>
                <button @click="increment(1,product)">+</button>
                {{ product.num }}
                <button @click="increment(-1,product)">-</button>
            </td>
            <td>{{ product.price * product.num }}</td>
            <td>
                <button @click="delPro(index)">删除商品</button>
            </td>
        </tr>

    </table>
    <h2> 购物车的总价格: {{ totalPrice() }}</h2>

    <div>
        编号:<input type="text" v-model="pro.id"> <br>
        商品的名称:<input type="text" v-model="pro.name"><br>
        商品的价格:<input type="text" v-model="pro.price"> <br>
        商品的数量:<input type="number" v-model="pro.num"> <br>
        <button @click="addPro"> 添加商品信息 </button>
    </div>

</div>
<!--
      01、画页面  (数据可以写死)
      02、vue 中准备数据
      03  展示 数据到view中

      加添业务:
         1、商品数量的加减的业务
                1、添加事件
                2、修改的pro的num的值
         2、商品的删除
         3、购物车的总价
         4、商品添加

-->
<script>
    new Vue({
        el: "#app",
        data: {
            products:[
                {
                    id:1,
                    name:"小米",
                    price:1000,
                    num:1
                },
                {
                    id:2,
                    name:"华为",
                    price:1100,
                    num:1
                },
                {
                    id:3,
                    name:"特斯拉",
                    price:2000,
                    num:1
                }
            ],
            pro:{
                id:0,
                name:"",
                price:0,
                num:1
            }
        },
        computed:{
        },
        methods:{

            //添加商品
            addPro(){

                this.pro.num = Number.parseInt(this.pro.num);
                this.products.push(this.pro);
                //添加成功后 清理表单
                this.pro = {
                    //num:1  //给一个默认number的数值
                }

            },

            //计算总价格
            totalPrice(){

                let money = 0;
                this.products.forEach(pro=>{
                    money += pro.price * pro.num
                })

                return money
            },

            //商品的删除
            delPro(index){

                //删除操作的方法
                //splice  数组中删除或者添加的方法
                //参数1: 删除开始的 位置
                //参数2: 删除几个元素
                this.products.splice(index,1)
            },

            //商品熟练的修改
            increment(val,pro){
                // 把字符串转成number
                val = Number.parseInt(val);
                //===   类型和数据的比较
                //==    数据的比较(内容的比较)
                if (val ===1){
                    pro.num +=val
                }else{
                    if (pro.num === 1){
                        alert("不能在减少了")
                        return
                    }
                    pro.num +=val
                }
            }
        }
    })
</script>

</body>
</html>